<!-- @format -->

<template>
  <div class="dropdown-example">
    <h2>下拉菜单组件示例</h2>

    <div class="example-row">
      <div class="example-item">
        <h3>基础用法</h3>
        <Dropdown>
          <template #default>
            <span>下拉菜单</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>
      </div>

      <div class="example-item">
        <h3>自定义触发器</h3>
        <Dropdown>
          <template #default>
            <button class="custom-trigger">点击我</button>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>
      </div>
    </div>

    <div class="example-row">
      <div class="example-item">
        <h3>触发方式</h3>
        <Dropdown trigger="hover" style="margin-right: 20px">
          <template #default>
            <span>悬停触发</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown trigger="click">
          <template #default>
            <span>点击触发</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>
      </div>

      <div class="example-item">
        <h3>禁用状态</h3>
        <Dropdown disabled style="margin-right: 20px">
          <template #default>
            <span>禁用的菜单</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown>
          <template #default>
            <span>部分禁用选项</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem disabled>禁用选项</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>
      </div>
    </div>

    <div class="example-row">
      <div class="example-item">
        <h3>分割线和激活状态</h3>
        <Dropdown>
          <template #default>
            <span>带分割线和激活状态</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem divided>带分割线</DropdownItem>
            <DropdownItem active>激活状态</DropdownItem>
          </template>
        </Dropdown>
      </div>

      <div class="example-item">
        <h3>不同位置</h3>
        <Dropdown placement="top" style="margin-right: 20px">
          <template #default>
            <span>向上弹出</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown placement="bottom">
          <template #default>
            <span>向下弹出</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
            <DropdownItem>选项3</DropdownItem>
          </template>
        </Dropdown>
      </div>
    </div>

    <div class="example-row">
      <div class="example-item">
        <h3>点击菜单项事件</h3>
        <Dropdown @command="handleCommand">
          <template #default>
            <span>点击菜单项</span>
          </template>
          <template #dropdown>
            <DropdownItem command="option1">选项1</DropdownItem>
            <DropdownItem command="option2">选项2</DropdownItem>
            <DropdownItem command="option3">选项3</DropdownItem>
          </template>
        </Dropdown>
        <div v-if="commandMessage" class="command-message">
          点击了: {{ commandMessage }}
        </div>
      </div>

      <div class="example-item">
        <h3>产品应用示例</h3>
        <Dropdown>
          <template #default>
            <div class="product-trigger">
              <span>产品申请</span>
              <span class="arrow-down">▼</span>
            </div>
          </template>
          <template #dropdown>
            <DropdownItem command="physical" icon="icon-box"
              >实物类</DropdownItem
            >
            <DropdownItem command="service" icon="icon-service"
              >服务类</DropdownItem
            >
          </template>
        </Dropdown>
      </div>
    </div>

    <div class="example-row">
      <div class="example-item">
        <h3>不同尺寸</h3>
        <Dropdown size="large" style="margin-right: 20px">
          <template #default>
            <span>大尺寸</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown size="default" style="margin-right: 20px">
          <template #default>
            <span>默认尺寸</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown size="small">
          <template #default>
            <span>小尺寸</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
          </template>
        </Dropdown>
      </div>

      <div class="example-item">
        <h3>不同主题</h3>
        <Dropdown theme="light" style="margin-right: 20px">
          <template #default>
            <span>亮色主题</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
          </template>
        </Dropdown>

        <Dropdown theme="dark">
          <template #default>
            <span>暗色主题</span>
          </template>
          <template #dropdown>
            <DropdownItem>选项1</DropdownItem>
            <DropdownItem>选项2</DropdownItem>
          </template>
        </Dropdown>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import Dropdown from './Index.vue'
  import DropdownItem from './DropdownItem.vue'

  const commandMessage = ref('')

  const handleCommand = (command: string | number | object) => {
    commandMessage.value = command as string
    setTimeout(() => {
      commandMessage.value = ''
    }, 2000)
  }
</script>

<style scoped>
  .dropdown-example {
    padding: 20px;
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
  }

  h2 {
    margin-bottom: 30px;
    color: #333;
    text-align: center;
    font-size: 24px;
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 15px;
  }

  h3 {
    margin-bottom: 15px;
    color: #666;
    font-size: 16px;
    font-weight: 600;
  }

  .example-row {
    display: flex;
    margin-bottom: 40px;
    flex-wrap: wrap;
  }

  .example-item {
    flex: 1;
    min-width: 300px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
  }

  .example-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .command-message {
    margin-top: 15px;
    padding: 10px;
    background-color: #f0f9eb;
    color: #67c23a;
    border-radius: 4px;
    font-size: 14px;
    animation: fadeIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .custom-trigger {
    padding: 8px 16px;
    background-color: #409eff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 500;
  }

  .custom-trigger:hover {
    background-color: #66b1ff;
  }

  .product-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background-color: #409eff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    min-width: 120px;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    transition: all 0.3s;
  }

  .product-trigger:hover {
    background-color: #66b1ff;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
  }

  .arrow-down {
    font-size: 12px;
    margin-left: 8px;
    transition: transform 0.3s;
  }

  /* 模拟图标类 */
  .icon-box::before {
    content: '📦';
    margin-right: 5px;
  }

  .icon-service::before {
    content: '🔧';
    margin-right: 5px;
  }
</style>
